<template>
  <div :class="[!vertical ? 'card-horizontal': 'card']" @click="showDetail(allParams)">
    <template v-if="vertical">
      <div class="cover">
        <img class="img" v-lazy="imgPath" :alt="title" />
        <div class="count">
          <template v-if="duration">
            <span class="sm">
              <i class="fa fa-bofangshu"></i>{{ view | formatNumber }}
            </span>
            <span class="sm">
              <i class="fa fa-danmushu"></i>{{ danmaku | formatNumber }}
            </span>
            <span class="sm">{{ duration | formatTime }}</span>
          </template>
          <template v-else>
            <span>
              <i class="fa fa-bofangshu"></i>{{ view | formatNumber }}
            </span>
            <span>
              <i class="fa fa-danmushu"></i>{{ danmaku | formatNumber }}
            </span>
          </template>
        </div>
      </div>
      <div class="title" v-html="title"></div>
    </template>
    <template v-else>
      <div class="cover">
        <img class="img" v-lazy="imgPath" :alt="title" />
        <span v-if="duration" class="duration">{{ duration | formatTime }}</span>
      </div>
      <div class="content">
        <div class="title" v-html="title"></div>
        <span class="author" v-if="author">
          <i class="fa fa-up-zhu"></i>
          {{ author }}
        </span>
        <div class="count">
          <span>
            <i class="fa fa-bofangshu"></i>{{ view | formatNumber }}
          </span>
          <span>
            <i class="fa fa-danmushu"></i>{{ danmaku | formatNumber }}
          </span>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { formatNumber, formatTime } from '@/filters/filters.js'
export default {
  name: 'VideoItem',
  props: {
    // 视频aid
    aid: {
      type: [Number, String]
    },
    // 视频bvid
    bvid: {
      type: String,
      required: true
    },
    // 作者
    author: {
      type: String
    },
    // 封面图路径
    coverPath: {
      type: String,
      required: true
    },
    // 视频标题
    title: {
      type: String,
      required: true
    },
    // 封面图尺寸
    coverSize: {
      type: String,
      default: '@480w_270h_1c'
    },
    // 播放数
    view: {
      type: Number
    },
    // 弹幕数
    danmaku: {
      type: Number
    },
    // 时长
    duration: {
      type: [Number, String]
    },
    // 布局 默认 ttb 从上到下， 可选 ltr 从左到右
    layout: {
      type: String,
      default: 'ttb'
    },
    // 所有参数
    allParams: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  computed: {
    vertical () {
      return this.layout === 'ttb'
    },
    imgPath () {
      return this.coverPath + this.coverSize
    }
  },
  filters: {
    formatNumber,
    formatTime
  },
  methods: {
    showDetail (allParams) {
      this.$emit('video-click', allParams)
      const { bvid } = allParams
      this.$router.push({ name: 'video', params: { bvid } })
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  padding: 8px 5px;
  .cover{
    @include cover(480, 270, 2px);
    background: {
      color: $color-grey;
      size: 36%;
      image: url('~@/assets/placeholder.png');
      repeat: no-repeat;
      position: 50%;
    }
  }
  .count{
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 6px;
    color: #fff;
    background: linear-gradient(0deg,rgba(0,0,0,.85), transparent);
    .fa{
      font-size: 14px;
      margin-right: 5px;
    }
    .sm {
      .fa{
        margin-right: 3px;
      }
    }
  }
  .title {
    @include max-lines(2);
    font-size: 12px;
    margin-top: 6px;
  }
}
.card-horizontal{
  display: flex;
  padding: 5px;
  .cover{
    @include cover(480, 270);
    width: 140px;
    .img {
      object-fit: cover;
      object-position: 50% 50%;
    }
    .duration{
      position: absolute;
      right: 4px;
      bottom: 4px;
      color: $color-white;
      font-size: 12px;
      padding: {
        left: 2px;
        right: 2px;
      };
      background-color: rgba(0,0,0,.5);
    }
  }
  .content{
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    font-size: 12px;
    color: $color-text-secondary;
  }
  .title{
    color: #222;
    @include max-lines(2);
    font-size: 14px;
    margin-bottom: 8px;
  }
  .author{
    display: flex;
    align-items: center;
    margin-bottom: 4px;
  }
  .count{
    display: flex;
    align-items: center;
    span:first-child {
      margin-right: 10px;
    }
  }
  .fa{
    margin-right: 5px;
    vertical-align: middle;
  }
}
</style>
